<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useSidebarStore } from '@/common/stores/home-sidebar'

const router = useRouter()
const sidebarStore = useSidebarStore()

const items = ref([
  { id: 1, image: '/src/assets/common/approval.png', text: '假期审批', route: '/approval' },
  { id: 2, image: '/src/assets/common/social.png', text: '社保管理', route: '/socialsecurity' },
  { id: 3, image: '/src/assets/common/role.png', text: '角色管理', route: '/role' },
  { id: 4, image: '/src/assets/common/salary.png', text: '添加员工', route: '/information' },
  { id: 5, image: '/src/assets/common/bpm.png', text: '添加权限', route: '/permissions' },
])

// 点击跳转对应路由
const onJump = (link: string) => {
  // 去掉开头的 '/'
  const trimmedLink = link.startsWith('/') ? link.slice(1) : link

  // 跳转到指定页面
  router.push(link)

  // 保存当前选中的菜单项
  sidebarStore.setSelectedKeys([trimmedLink])
}
</script>

<template>
  <div class="jump">
    <div class="jump-box">
      <h3>快捷入口</h3>
      <div style="display: flex; justify-content: space-between">
        <div class="jump-box-content" v-for="(item) in items" :key="item.id" @click="onJump(item.route)">
          <a-image :preview="false" style="width: 40px" :src="item.image" mode="scaleToFill" />
          <p class="jump-box-content-text">{{ item.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.jump {
  &-box {
    width: 100%;
    padding: 20px;
    border-radius: 5px;
    background-color: white;

    &-content {
      margin-top: 10px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      &-text {
        margin-top: 10px;
      }
    }
  }
}
</style>
